<%-- 
  -- Body New para AcademicRecord.
  --
  -- @author ariel.piechotka
--%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/struts-html-el-1.2.8.tld" prefix="html-el"%>
<%@ taglib uri="/WEB-INF/struts-logic-el-1.2.8.tld" prefix="logic-el"%>
<%@ taglib uri="/WEB-INF/security.tld" prefix="security" %>
<%@ taglib uri="/WEB-INF/ajaxtags.tld" prefix="ajax" %>

<%@ taglib uri="http://struts.apache.org/tags-bean-el" prefix="bean2"%>

<script src="<html:rewrite page='/protected/script/util.js'/>" type="text/javascript"></script>

<%-- Para EXT --%>
<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/script/ext-1.1.1/resources/css/ext-all.css'/>" />

<script src="<html:rewrite page='/protected/script/ext-1.1.1/adapter/ext/ext-base.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ext-1.1.1/ext-all.js'/>" type="text/javascript"></script>

<script src="<html:rewrite page='/protected/script/calendar/calendar.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/calendar/calendar-setup.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/calendar/lang/calendar-es.js'/>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/script/calendar/style/calendar-blue.css'/>" id="styleFileAnyId"/>

<!-- Para AjaxTags -->
<script src="<html:rewrite page='/protected/script/scriptaculous/scriptaculous.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ajaxtags/ajax/ajaxtags.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ajaxtags/ajax/ajaxtags_parser.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ajaxtags/ajax/ajaxtags_controls.js'/>" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/style/ajaxtags/ajaxtags.css'/>" id="AjaxTagsCssId"/>

<%-- Funcionalidad de manejo de Ajax + JSON + Divs flotantes y esas cosas... --%>
<script src="<html:rewrite page='/protected/script/debt.js'/>" type="text/javascript"></script>

<div class="errors">
    <html:errors />
</div>

<script type="text/javascript">
    /** Guarda el acta */
    function create() {
    	
        var coursings = "";
        var i = -1;
        while ($("hiddenAutoCompleteSurnameId["+(++i)+"]") != null) {
        	var studentIdValue = $("studentId["+i+"]").value;
        	if(studentIdValue == "0")
        		studentIdValue = "";
        	var markIdValue = $("markId["+i+"]").value;
        	if(Util.valid.isBlank(studentIdValue) && Util.valid.isBlank(markIdValue))
        		continue;
        	if(!Util.valid.isBlank(studentIdValue) != !Util.valid.isBlank(markIdValue)) { // XOR
                Ext.MessageBox.alert('Error', 'Si especifica el participante debe indicar su nota, y viceversa ... ');
                $("studentSurnameId["+i+"]").focus();
        		return;
        	}

            // Se eligio pero puede haber sido modificado en ese caso se invalida.
            var oldStudentSurname = $("hiddenAutoCompleteSurnameId["+i+"]").value; 
            var actualStudentSurname = $("studentSurnameId["+i+"]").value; 
            
            if (oldStudentSurname != actualStudentSurname) {
                // Se modifico  => limpio todo y alerto
                $("hiddenAutoCompleteId["+i+"]").value = "";
                $("hiddenAutoCompleteSurnameId["+i+"]").value = "";
                $("studentSurnameId["+i+"]").value = "";
                Ext.MessageBox.alert('Error', 'Por favor, no modifique el campo de participante una vez que lo elige de la lista ... ');
                $("studentSurnameId["+i+"]").focus();
                return;
            }
            else
            	coursings += studentIdValue + "," + markIdValue + ";"
		}
		if(coursings.length > 0)
			coursings = coursings.substring(0, coursings.length - 1);
		else {
            Ext.MessageBox.alert('Error', 'Las actas deben tener al menos un registro. ');
            return;
		}
		
		
        var teacherIdValue = $("teacherId").value;
        if (Util.valid.isBlank(teacherIdValue)) {
            Ext.MessageBox.alert('Error', 'El campo Docente es obligatorio. ');
            $("teacherNameId").focus();
            return;
        }
        else {
            // Se eligio pero puede haber sido modificado en ese caso se invalida.
            var oldTeacherSurname = $("teacherNamePostId").value; 
            var actualTeacherSurname = $("teacherNameId").value; 
            
            if (oldTeacherSurname != actualTeacherSurname) {
                // Se modifico  => limpio todo y alerto
                $("teacherId").value = "";
                $("teacherNameId").value = "";
                $("teacherNamePostId").value = "";
                Ext.MessageBox.alert('Error', 'Por favor, no modifique el campo de docente una vez que lo elige de la lista ... ');
                $("teacherNameId").focus();
                return;
            }
        }    
        
        var subjectIdValue = $("subjectId").value;
        var dateValue = $("dateId").value;

        if (Util.valid.isBlank(dateValue)) {
            Ext.MessageBox.alert('Error', 'Debe ingresar la fecha del acta. ');
            $("dateId").focus();
            return;
        }
        
		var coursingsObj = $("coursingsConfirmId");
		var subjectIdObj = $("subjectIdConfirmId");
		var teacherIdObj = $("teacherIdConfirmId");
		var dateObj = $("dateConfirmId");
        
        coursingsObj.value = coursings;
        subjectIdObj.value = subjectIdValue;
        teacherIdObj.value = teacherIdValue;
        dateObj.value = dateValue;
        
        var form = $("createAcademicRecordFormId");
        form.submit();
    }

    /* Procesa la respuesta del autocomplete
     * Se deja en "teacherNameAutoCompletePostId" (un hidden) el "id;nombre"
     * entonces se parsea y se saca el id y se deja en "teacherId" y en 
     * "teacherNameId" y "teacherNamePostId" se deja el nombre. Se deja dos veces
     * para validar q no se cambie
     */
    var postAutoCompleteTeacher = function() {
        var hiddenAutoCompletePostValue = $("teacherNameAutoCompletePostId").value;
    
        if (!Util.valid.isBlank(hiddenAutoCompletePostValue)) {
            // Algo se trajo entonces se parsea
            var splitted = hiddenAutoCompletePostValue.split(';'); 
            
            var id = splitted[0];
            var teacherName = splitted[1];
            
            $("teacherId").value = id;
            $("teacherNameId").value = teacherName;  
            $("teacherNamePostId").value = teacherName;
            
            // Limpio lo que estaba antes....
            $("teacherNameAutoCompletePostId").value = "";
        }
    }
</script>

<%-- El ID del form NO debe ser modificado. Se usa desde el menu --%>
<html:form action="/protected/showNewAcademicRecord" styleId="subjectFormId">

    <h2>Acta</h2>
    
    <div class="academicRecordEdit">
        <table class="tableData" cellspacing="0">
            <tr>
                <td class="tableDataTitle">
                    Materia*
                </td>
                <td class="tableDataValue">
                    <html:select property="idSubject" styleClass="allSelects" styleId="subjectId" >
                        <html:optionsCollection property="subjectOptions"/>
                    </html:select>
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Docente*
                </td>
                <td class="tableDataValue">
                    <html:text property="teacherName" styleId="teacherNameId" styleClass="form-autocomplete" size="30" title="Ingrese el nombre y espere a que se carguen los resultados..." />

                    <%--    En teacherId esta el ID cuando se autocompleta. El post function deja 
                            en teacherNamePost el nombre del docente de manera de controlar q no se haya cambiado.
                            Ojo xq AjaxTags deja tambien en teacherNamePostId lo q vino.  --%>
                    <html:hidden property="teacherId" styleId="teacherId"/>
                    <input type="hidden" name="teacherNameAutoCompletePost" id="teacherNameAutoCompletePostId" />
                    <input type="hidden" name="teacherNamePost" id="teacherNamePostId" />
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Fecha*
                </td>
                <td class="tableDataValue">
                    <html:text property="date" styleId="dateId" readonly="true"/>
                    &nbsp;
                    <img id="dateImgId" style="border: 0px;" title="title" src="<html:rewrite page="/protected/img/date.png"/>" title="Seleccione una fecha"/>
                </td>            
            </tr>

            <tr>
                <td class="tableDataTitle">
                    Participantes
                </td>
                <td class="tableDataValue">
                    <html:select property="qtyStudents" styleClass="allSelects" styleId="qtyStudentsId" onchange="javascript:doReload();">
                        <html:optionsCollection property="qtyStudentsOptions"/>
                    </html:select>
                </td>
            </tr>
            <logic-el:iterate id="oneStudentId" name="academicRecordForm" property="studentsIds" indexId="idx">
	            <tr>
	                <td class="tableDataTitle">
	                    Participante
	                </td>
                    <td class="tableDataValue">
	                    <html:text property="studentSurname" style="margin-top:5px;" styleId="studentSurnameId[${idx}]" styleClass="form-autocomplete" size="30" title="Ingrese el apellido y espere a que se carguen los resultados..." />
	                    <%--    En studentId esta el ID cuando se autocompleta luego del post-function. 
	                            En hiddenAutoCompleteId esta lo q vino del autocomplete como auxiliar --%>
	                    <html:hidden property="studentId" styleId="studentId[${idx}]"/>
	                    <input type="hidden" name="hiddenAutoComplete" id="hiddenAutoCompleteId[${idx}]" />
	                    <input type="hidden" name="hiddenAutoCompleteSurname" id="hiddenAutoCompleteSurnameId[${idx}]" />
	                </td>     
	            </tr>
	            <tr>
	                <td class="tableDataTitle">
	                    Nota
	                </td>
	                <td class="tableDataValue">
	                    <html:text property="studentMark" styleId="markId[${idx}]" alt="Nota" maxlength="2"/>
	                </td>
	            </tr>

				<script type="text/javascript">
				    var postAutoComplete${idx} = function() {
					    var hiddenAutoCompleteValue = $("hiddenAutoCompleteId[${idx}]").value;
					    
					    if (!Util.valid.isBlank(hiddenAutoCompleteValue)) {
					        // Algo se trajo entonces se parsea
					        var splitted = hiddenAutoCompleteValue.split(';'); 
					        
					        var id = splitted[0];
					        var surnamePlusName = splitted[1];
					        
					        $("studentId[${idx}]").value = id;
					        $("studentSurnameId[${idx}]").value = surnamePlusName;  
					        $("hiddenAutoCompleteSurnameId[${idx}]").value = surnamePlusName;
					        
					        // Limpio lo que estaba antes....
					        $("hiddenAutoCompleteId[${idx}]").value = "";
					    }
				    }
				</script>
				<ajax:autocomplete
				  baseUrl="${pageContext.request.contextPath}/protected/autocompleteStudents.do"
				  source="studentSurnameId[${idx}]"
				  target="hiddenAutoCompleteId[${idx}]"
				  parameters="studentSurname={studentSurnameId[${idx}]}"
				  className="autocomplete"
				  indicator="indicatorRegion"
				  minimumCharacters="2"
				  postFunction="postAutoComplete${idx}"
				/>
			</logic-el:iterate>
        </table>
        
        <br/>
        <div id="clear"></div>
    	<p class="mensajeCamposObligatorios">Los campos marcados con un asterisco (*) son obligatorios.</p>
    	<div id="clear"></div>

        <script type="text/javascript">
            Calendar.setup({
              inputField    : "dateId",
              button        : "dateImgId",
              align         : "Tr",
              ifFormat      : "%d/%m/%Y"
            });
        </script>
        
	    <%-- Indicador de llamada de AJAX para el autocomplete --%>
	    <span id="indicatorRegion" style="display: none; margin-left: 50%;">
	        <img id="anyId" style="border: 0px;" title="title" src="<html:rewrite page="/protected/img/ajax-loader.gif"/>" />
	    </span>

        <%-- No se valida seguridad ya que SOLO entran aca los q tienen permiso --%>
        <div class="panelButton">
            <input type="button" value="Guardar" onclick="create();" title="Guarda el acta..." class="button">
        </div>  
    
    </div>

</html:form>

<ajax:autocomplete
  baseUrl="${pageContext.request.contextPath}/protected/autocompleteTeachers.do"
  source="teacherNameId"
  target="teacherNameAutoCompletePostId"
  parameters="teacherName={teacherNameId}"
  className="autocomplete"
  indicator="indicatorRegion"
  minimumCharacters="2"
  postFunction="postAutoCompleteTeacher"
/>

<%-- Inyectados por Javascript --%>
<div id="createDivId" class="hideClass">
    <html:form action="/protected/createAcademicRecord" styleId="createAcademicRecordFormId">
        <html:hidden property="coursingsStr" value="" styleId="coursingsConfirmId" />
        <html:hidden property="subjectId" value="" styleId="subjectIdConfirmId" />
        <html:hidden property="teacherId" value="" styleId="teacherIdConfirmId" />
        <html:hidden property="date" value="" styleId="dateConfirmId" />
    </html:form>
</div>
